Drupal Guides

[PACKTl 1

L PUBLISHING J

Formatting the Comments Form and Output

We enabled the comments functionality earlier, let's now set the look and feel. The comments in the default Zen theme are shaded a light blue, consistent with the Zen color scheme. For Tao, we want to make things a little more conservative, a little more somber, so we will change that to a light gray and also apply our font selections.

Make the following changes to the selectors, below:

.comment {

margin: 0 0 10px 0; padding: 10px; background: #f1f1f1;

.comment h3.title, .comment h3.title a { font-size: 122%; color: #666; font-weight: normal;

font-family: Verdana, Arial, Sans-serif; margin-bottom: 3px; margin-top: 0; padding-left: 0;

.comment .new { color: #FFC600; font-weight: bold;

font-family: Arial, Verdana, Sans-serif;

If what you see on your screen at this point is not largely similar to the image at the end of the chapter, odds are you skipped a style definition or have missed commenting out a selector; go back and check the stylesheets to make sure you deleted or commented out any potential inheritance problems.

Adapting the Themable Functions

We don't really need to make a large number of changes to our themable functions to achieve our goals, but we will make some minor modifications to bring more consistency to the new look and feel.

Overriding a Themable Function

The Zen theme includes a themable function for handling the breadcrumb trail. The function is located in the zen/zen/template.php file and looks like this:

function zen_breadcrumb($breadcrumb) {

$show_breadcrumb = theme_get_setting('zen_breadcrumb');$show_ breadcrumb_home = theme_get_setting('zen_breadcrumb_home');

$breadcrumb_separator = theme_get_setting('zen_breadcrumb_ separator');

$trailing_separator = (theme_get_setting('zen_breadcrumb_trailing') || theme_get_setting('zen_breadcrumb_title')) ? $breadcrumb_separator

// Determine if we are to display the breadcrumb if ($show_breadcrumb == 'yes' || $show_breadcrumb == 'admin' && arg(0) == 'admin') { if (!$show_breadcrumb_home) { // Optionally get rid of the homepage link array_shift($breadcrumb); }

if (!empty($breadcrumb)) { // Return the breadcrumb with separators return '<div class="breadcrumb">' . implode($breadcrumb_separator,

$breadcrumb) . "$trailing_separator</div>"; }

// Otherwise, return an empty string return '';

I want to add a label to help clue people into the function of the breadcrumb. To do this, I must first copy the original function from the Zen directory and paste it into my tao/template.php file. I need to also rename the function to reflect my theme name (from Zen to Tao). The modifications look like this:

function tao_breadcrumb($breadcrumb) {

$show_breadcrumb = theme_get_setting('zen_breadcrumb');$show_ breadcrumb_home = theme_get_setting('zen_breadcrumb_home');

$breadcrumb_separator = theme_get_setting('zen_breadcrumb_ separator');

$trailing_separator = (theme_get_setting('zen_breadcrumb_trailing') || theme_get_setting('zen_breadcrumb_title')) ? $breadcrumb_separator

// Determine if we are to display the breadcrumb if ($show_breadcrumb == 'yes' || $show_breadcrumb == 'admin' && arg(0) == 'admin') { if (!$show_breadcrumb_home) {

// Optionally get rid of the homepage link array_shift($breadcrumb); }

if (!empty($breadcrumb)) { // Return the breadcrumb with separators return "<div class="breadcrumb"><strong>You are here: </strong>" . implode($breadcrumb_separator, $breadcrumb) . "$trailing_separator</

// Otherwise, return an empty string return '';

I Remember to clear the Drupal cache each time you change a themable I

I function or template. I

Modifying a Default Template

Our new theme Tao is intended as a blog theme, so let's look at adjusting the formatting of the blog node. To do this, we are going to create a template file to control the output of the blog node; a template file is more specific, and hence preferred over the Zen's default node.tpl.php.

First, duplicate the file zen/zen/node.tpl.php. Paste the file into our tao directory and rename it node-blog.tpl.php; this file will now be used by the system to handle the formatting of the blog node in our theme. Note that you will also need to copy the base template into the theme directory. Suggestions only work when they are in the same directory as the base template. In this case, it means we need to copy into our tao directory Zen's node.tpl.php file. We will not make any changes to the node.tpl.php file, nonetheless it must be in the directory for the suggestion to work properly.

The following variables are available in the node.tpl.php file:

Variable	Purpose
$content	Node content, teaser if it is a summary.
$date	Formatted creation date.
$directory	The directory where the theme is located.
$id	The sequential ID of the node being displayed in a list.
$is front	True if the front page is currently being displayed.
$links	Variable Purpose $name Name of author. $node The node object. $node url Link to node. $page True if the node is being displayed by itself as a page. $picture HTML for user picture. $sticky True if the node is sticky. $submitted Author and creation date information. $taxonomy Array of HTML links for taxonomy terms. $teaser Only returns the teaser rather than the full node text. $terms HTML for taxonomy terms. $title Title of node. $zebra Alternates between odd/even in a list. The default file does not use all these variables, but that doesn't stop us from adding them in. Let's modify and format the information relating to the author and time of posting by modifying the code and adding the $date variable. I rlkX More information on the various variables available can be found in I I Chapter 4 of this book. I The Zen theme page node is set up to display with each article the text submitted by: followed by the author's name; we want to do that differently in Tao. Tao is intended as a personal blog theme, so there's no need for us to display the author name. Additionally, it would be nice to display the date of each entry. Let's break away from the standard Zen "submitted by" language and go with something simple, like showing "posted" followed by the date. To achieve this, I am going to eliminate $submitted from our template file and instead add my preferred language ("posted") and one of the available variables: $date. I will also format the $date output to make it stand out a bit more. The original statement looked like this: <?php if ($submitted): ?> <div class="submitted"> <?php print $submitted ?> </div> I am going to modify it as follows: <?php if ($submitted): ?> <div class="submitted"> <?php print t('Posted ') ?><strong><?php print $date ?></strong> Save your file and you're done with this final step. Before and After When we started this process, we had the STARTERKIT subtheme in place: Now, after completing the changes to the CSS, the themable functions, and the default templates, we have Tao:

0 0